import React, { useState } from "react";
import { ResultPage, Card,Button } from "antd-mobile";
import { Input } from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
function Index() {
  let [start, setStart] = useState();
  let [end, setEnd] = useState();
  let [date] = useState(dayjs().format("MM-DD"));
  let nav=useNavigate()
  return (
    <div>
      <ResultPage title="火车票预定" description="便捷购票，服务您的每一次出行">
        <ResultPage.Card style={{ padding: 8 }}>
          <div className="kk">
            <Input
              placeholder="出发城市"
              value={start}
              onChange={(val) => {
                setStart(val);
              }}
            />
            <span>
              <LoopOutline />
            </span>
            <Input
              placeholder="到达城市"
              value={end}
              onChange={(val) => {
                setEnd(val);
              }}
            />
          </div>
          <span style={{ fontSize: "20px" }}>{date}</span>
          <Button block color="primary" size="large" onClick={()=>nav(`/list?start=${start}&end=${end}`)}>
            查询
          </Button>
        </ResultPage.Card>

       
      </ResultPage>
    </div>
  );
}

export default Index;
